// ==============================  分类管理 ================================
const layer = layui.layer
const form = layui.form
let laypage = layui.laypage;
// === 获取列表内容 渲染到页面上===
let kdbksjb = {
    catename: '',
    page: 1,
    limit: 10,
}
getList()
function getList() {
    axios.get('/ydd_cate/list', { params: kdbksjb }).then((res) => {
        // console.log(res.data.data.count);
        let newArr = res.data.data.data.map(({ icon, id, catename, sort_num }, index) => {
            return `
        <tr>
        <td>${index + 1}</td>
        <td>${id}</td>
        <td>${catename}</td>
        <td>${icon}</td>
        <td>${sort_num}</td>
        <td>
                <div class="yuan1">
                    <i class="layui-icon layui-icon-edit" id="edit" style="font-size: 15px; color: #ffff;" data-id=${id}></i>
                </div>
                <div class="yuan2">
                    <i class="layui-icon layui-icon-delete" id="delete" style="font-size: 15px; color: #ffff;" data-id=${id}></i>
                </div>

        </td>
        </tr>
        `
        })

        $('#leige').html(newArr.join(''))
        paging(res.data.data.count)
    })
}
// ===添加分页 ==
function paging(count) {
    laypage.render({
        elem: 'page-boxs', //注意，这里的 test1 是 ID，不用加 # 号
        count, //数据总数，从服务端得到
        limit: kdbksjb.limit,//每页的条数
        limits: [1, 2, 4, 6, 10],// 每页条数的选择
        curr: kdbksjb.page,//起始页
        layout: ["count", 'limit', 'prev', 'page', 'next', 'skip'],//自定义排版
        jump: function (obj, first) {
            //分页切换会触发涂改回调函数

            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            kdbksjb.limit = obj.limit
            kdbksjb.page = obj.curr
            //首次不执行
            if (!first) {
                //do something
                getList()
            }
        }
    });
}

// ===新增===
// 添加表单的内容
const addFormStr = `
<form id="addForm" class="layui-form">
          <!-- 第一行 分类名称 -->
           <div class="layui-form-item">
                  <div class="layui-col-md10">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="catename" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                 </div>
           </div>
           <div class="layui-form-item forms">
                <div class="layui-col-md6 mese">
                    <label class="layui-form-label">图标class</label>
                    <div class="layui-input-block">
                    <input type="text" name="icon" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                    </div>
                </div>
         </div>

         <div class="layui-form-item jiahao">
            <label class="layui-form-label"><b>排序大小</b></label>
            <div class="layui-input-block">
                <button class=" layui-btn-primary 
                " id="decrease"
                    style="width: 40px;height: 38px;position: relative;top: 0px;left: 0px;background-color: #f5f7fa;">
                    <h3>-</h3>
                </button>
                <button class=" layui-btn-primary" id="increase"
                    style="width: 40px;height: 38px;position: relative;top: 0px;left: 180px;background-color: #f5f7fa;">
                    <h3>+</h3>
                </button>
                <input type="text" value="1" name="sort_num" style="width: 180px;height: 35px;text-align: center; position: relative; top: 0px;left: -46px" ; id="shurukuang" >
         </div>

       </div>
        
         <!-- 第三行 按钮 -->
         <div class="layui-form-item">
           <div class="layui-input-block">
             <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
             <button type="reset" class="layui-btn layui-btn-primary">取消</button>
           </div>
         </div>
        </form>
`


let indexAddForm
$('#newSrt').on('click', function () {
    // 弹出框
    indexAddForm = layer.open({
        title: '添加分类', // 标题
        type: 1, // 页面层
        area: ['500px', '250px'], // 定宽高
        content: addFormStr, // 内容
    })
})
// 事件委托的形式给form表单注册点击事件
$('body').on('submit', '#addForm', function (e) {
    //组织表单默认事件
    e.preventDefault()
    // 收集表单数据
    const data = $(this).serialize()
    axios.post('/ydd_cate/add', data).then((res) => {
        // console.log(res.data.errno);
        if (!res.data.errno === 0) return layer.msg('失败')

        layer.msg('成功')
        getList()
        // 通过索引关闭页面
        layer.close(indexAddForm)
    })

})

// ===编辑===
const editor = `
<form id="addForm" class="layui-form"  lay-filter="formTest">
<input name="id" style="display:none;">
          <!-- 第一行 分类名称 -->
           <div class="layui-form-item">
                  <div class="layui-col-md10">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="catename" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                 </div>
           </div>
           <div class="layui-form-item forms">
                <div class="layui-col-md6 mese">
                    <label class="layui-form-label">图标class</label>
                    <div class="layui-input-block">
                    <input type="text" name="icon" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                    </div>
                </div>
               <div class="setase">
                    <a href="#">
                    <p>具体参见fontawesome图标库</p>
                    </a>
               </div>
         </div>

         <div class="layui-form-item jiahao">
            <label class="layui-form-label"><b>排序大小</b></label>
            <div class="layui-input-block">
                <input type="text" value="" name="sort_num" style="width: 180px;height: 35px;text-align: center; position: relative; top: 0px;left: 26px" ; id="shurukuang" >
            </div>
       </div>
        
         <!-- 第三行 按钮 -->
         <div class="layui-form-item">
           <div class="layui-input-block">
             <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
             <button type="reset" class="layui-btn layui-btn-primary">取消</button>
           </div>
         </div>
        </form>
`
let sttternt

$('#leige').on('click', '#edit', function () {
    // 获取按钮上的自定义属性
    let id = $(this).attr("data-id")
    // console.log(id);
    // 获取数据
    axios.get(`/ydd_cate/rowInfo?id=${id}`).then((res) => {
        // console.log(res.data.data);
        form.val("formTest", res.data.data);
    })
    // 弹出框
    sttternt = layer.open({
        title: '修改分类', // 标题
        type: 1, // 页面层
        area: ['500px', '250px'], // 定宽高
        content: editor,
    });

})
// 更新==============
$('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    let data = $(this).serialize()
    console.log(data);
    axios.post('/ydd_cate/update', data).then((res) => {
        console.log(res.data.errno);
        if (res.data.errno !== 0) return layer.msg('失败')

        layer.msg('成功')
        getList()
        // 通过索引关闭页面
        layer.close(sttternt)
    })
})

// ==删除 ===
$('#leige').on('click', '#delete', function () {
    let id = $(this).attr('data-id')
    console.log(id);
    axios.get(`/ydd_cate/del?id=${id}`).then((res) => {
        console.log(res.data.errno);
        if (!res.data.errno === 0) return layer.msg('失败')
        layer.msg('成功')
        getList()
    })
})



// ==搜索 ===
let shangchuan = {
    catename: '',
    page: 1,
    limit: 10
}


$('#chaxun').on('click', function () {
    shangchuan.catename = $('#sous').val()
    console.log(111, shangchuan.catename);
    axios.get('/ydd_cate/list', { params: shangchuan }).then((res) => {
        // console.log(res.data.data.data);
        let newArr = res.data.data.data.map(({ icon, id, catename, sort_num }, index) => {
            return `
        <tr>
        <td>${index + 1}</td>
        <td>${id}</td>
        <td>${catename}</td>
        <td>${icon}</td>
        <td>${sort_num}</td>
        <td>
                <div class="yuan1">
                    <i class="layui-icon layui-icon-edit" id="edit" style="font-size: 15px; color: #ffff;" data-id=${id}></i>
                </div>
                <div class="yuan2">
                    <i class="layui-icon layui-icon-delete" id="delete" style="font-size: 15px; color: #ffff;" data-id=${id}></i>
                </div>

        </td>
        </tr>
        `
        })

        $('#leige').html(newArr.join(''))
        paging(res.data.data.count)

        $('#sous').val('')
    })


})
// 搜索隐藏

$('#yincang').on('click', function () {
    $('#yincangs').toggle()
    $('.xinzeng').toggleClass('m_270')
})